<template>
    <div class="h">
        <div class="bigbox h">
            <div class="titbox flex-c-c-c" v-for="(item, index) in dataList" :key="index">
                <topBottomTit class="mt-5" :title="item.title" :url="item.img" />
                <div class="flex-sa-c databox">
                    <topBottomData :num="formatNumber(item.today)" title="今日" />
                    <topBottomData :num="formatNumber(item.recent)" title="近30天" />
                </div>
            </div>
        </div>
    </div>


</template>
<script setup>
import { ref } from 'vue';
import topBottomTit from './components/topBottomTit.vue';
import topBottomData from './components/topBottomData.vue';
import { formatNumber } from './config.js';
const dataList = ref([
    {
        img: new URL(`./assets/扫码@2x.png`, import.meta.url).href,
        title: '电话开卡地线索数',
        today: 6699,
        recent: 69999,
    },
    {
        img: new URL(`./assets/扫码@2x(2).png`, import.meta.url).href,
        title: '运营商扫码数',
        today: 6699,
        recent: 69999,
    },
    {
        img: new URL(`./assets/扫码@2x(1).png`, import.meta.url).href,
        title: '银行开卡地线索数',
        today: 6699,
        recent: 69999,
    },
    {
        img: new URL(`./assets/容器 21222@2x.png`, import.meta.url).href,
        title: '银行扫码数',
        today: 6699,
        recent: 69999,
    },
])
</script>
<style lang="scss" scoped>
@import './css/index.scss';

.bigbox {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    width: 100%;

    .titbox {
        padding: 7px;
        background-color: rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        width: calc(50% - 5px);
        height: calc(50% - 5px);

        .databox {
            border-radius: 5px;
            padding: 10px 0;
            background-color: rgba(255, 255, 255, 0.1);
            margin-top: 5%;
            width: 100%;
            height: 100%;
        }
    }
}
</style>